<template>
  <div>
    <img src="http://fyf-1258898967.cos.ap-nanjing.myqcloud.com/2.png" />
<van-field
        v-model="ruleForm.whitePhoneUrl"
        name="uploader"
        label
      >
        <template #input>
          <!-- <van-uploader
            v-model="uploader"
            :max-count="1"
            :before-read="beforeRead"
            :after-read="afterRead"
            :before-delete="delImgId"
          >
          </van-uploader> -->
          <!-- 自定义裁剪组件 -->
          <image-crop
            :uploadLoading="uploadLoading"
            :imgUrl="ruleForm.whitePhoneUrl"
            @before-upload="beforeRead"
            @after-upload="cropUpload"
          ></image-crop>
          <div class="notice">
            <div>1、请上传标准白底1寸证件照</div>
            <div>2、该照片将应用于工卡制作、社保等</div>
          </div>
        </template>
      </van-field>
  </div>
</template>

<script>
/* eslint-disable standard/no-callback-literal */

import imageCrop from '@/components/imageCrop/imageCrop.vue'
import request from '@/utils/request.js'
// 安装好官方sdk之后 会得到一个cos对象  这个对象身上有完整的上传方法
// 按照官方demo的配置把配置项修改为我们自己的就可以了
import COS from 'cos-js-sdk-v5'
// 以自己的秘钥生成一个上传的cos实例对象
const cos = new COS({
  SecretId: 'AKIDpWXikucHqD4jMFtYSBnNl081WqvAo3f2', // 身份识别ID
  SecretKey: 'IhvwkJgsCGzUowqbIpEI8nQvEtKC3fU6' // 身份秘钥
})
export default {
  components: {
    imageCrop
  },
  data () {
    return {
      ruleForm: {
        whitePhoneUrl: ''
      }
    }
  },
  setup () {
    return {}
  },
  methods: {
    beforeRead (file, callback) {
      const isImgType = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isImgType) {
        this.$toast('上传图片只能是 JPG或PNG 格式!')
        callback(false)
        return false
      }
      if (!isLt10M) {
        this.$toast('上传图片大小不能超过 10MB!')
        callback(false)
        return false
      }
      callback(true)
      return true
    },
    afterRead (file) {
      file.status = 'uploading'
      file.message = '上传中...'
      request.uploadPic(file).then((res) => {
        if (res.code === 1) {
          file.status = 'done'
          file.message = '上传完成'
          this.ruleForm.whitePhotoId = res.data
        } else {
          file.status = 'failed'
          file.message = '上传失败'
          this.$toast(res.data)
        }
      })
    },
    // 裁剪点击确定
    cropUpload ({ content, file }) {
      console.log('file')
      console.dir(file)
      this.uploadLoading = true

      var arr = content.split(','); var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      var obj = new Blob([u8arr], { type: mime })

      cos.putObject({
        Bucket: 'fyf-1258898967', /* 存储桶 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: file.name, /* 文件名 */
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: obj, // 上传文件对象
        onProgress: (progressData) => {
          // 这里可以拿到图片实时的上传进度
          console.log('进度：', JSON.stringify(progressData))
          // 把progressData中的percent数据乘以100交给负责显示进度条的属性即可
          this.percent = progressData.percent * 100
        }
      }, (err, data) => {
        console.log(err || data)
        // 上传成功之后
        if (data.statusCode === 200) {
          console.log(data)
          // this.imageUrl = `https:${data.Location}`
          // this.showProgress = false
        }
      })

      // request.uploadPic(file).then((res) => {
      //   if (res.code === 1) {
      //     this.uploadLoading = false
      //     this.ruleForm.whitePhotoId = res.data
      //   } else {
      //     this.uploadLoading = false
      //     this.$toast(res.data)
      //   }
      // })
    },
    delImgId (file) {
      this.ruleForm.whitePhotoId = ''
      this.ruleForm.whitePhoneUrl = ''
      return true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
